<script>
import MixinLists from './mixin'
import {
  TABLE_FIELD_YEAR,
  TABLE_FIELD_QUARTER
} from '@/config'

/* IFTRUE_ONLY_NANCHANG
import { quickReport } from '@/api/enterpriseQuarterlyReport2'
FITRUE_ONLY_NANCHANG */
/* IFTRUE_NOT_NANCHANG */
import { quickReport } from '@/api/enterpriseQuarterlyReport'
/* FITRUE_NOT_NANCHANG */
import ReportHistoryModal from './components/report-history-modal/index.vue'

import QuarterlyAccountDetails from '@/mixins/quarterly-account-details-new'
import MixinReportReportExportExcel from '@/mixins/mixin-report-report-export-excel'

export default {
  name: 'report-report',
  components: {
    ReportHistoryModal,
  },
  mixins: [
    MixinLists,
    QuarterlyAccountDetails,
    MixinReportReportExportExcel,
  ],
  data () {
    return {
      type: 1,
      year: this.$dayjs().format('YYYY'),
      quarter: this.$dayjs().quarter(),
      options: [
        { value: 1, label: '第一季度' },
        { value: 2, label: '第二季度' },
        { value: 3, label: '第三季度' },
        { value: 4, label: '第四季度' }
      ],

      tableId: null,

      quickReporting: false,
      quickDownloading: false,
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    userInfo () {
      return this.$store.state.user.userInfo || {}
    },
    enterpriseId () {
      const { tenantId } = this.userInfo
      return tenantId ? String(tenantId) : null
    },
    enterpriseName () {
      const { tenantName, userName } = this.userInfo
      return tenantName || userName || ''
    },
    titleWidth () {
      let w = 200;
      if (this.showButton) {
        w += 300
      }
      if (this.useAutoSave) {
        w += 100
      }
      return w
    },
    showLoadPrevDataButton () {
      // 当季度为 1 时不显示加载上期数据按钮
      return this.quarter !== 1
    }
  },
  watch: {
    type: {
      handler (val) {
        // 2-年度，对应 quarter = 5
        this.quarter = val === 1 ? this.$dayjs().quarter() : 5
      },
      immediate: true
    },
    year () {
      this.clickSearch()
    },
    quarter () {
      this.clickSearch()
    },
    showTableAccount (val) {
      if (val === false) {
        this.clickSearch()
      }
    }
  },
  methods: {
    clickSearch () {
      const params = {
        [TABLE_FIELD_YEAR]: this.year,
        [TABLE_FIELD_QUARTER]: this.quarter,
      }
      this.getLists(params);
    },
    async clickReport () {
      const params = {
        year: this.year,
        quarter: this.quarter,
        tenantId: this.enterpriseId,
        tableIdList: this.lists.map(v => v.tableId)
      }
      this.quickReporting = true;
      try {
        await quickReport(params)
        this.$message.success('上报成功')
        this.clickSearch()
      } finally {
        this.quickReporting = false;
      }
    },
    clickView (row, readonly) {
      this.edit(row, readonly)
    },
    clickViewHistory (row) {
      this.tableId = row.tableId;
      this.$nextTick(() => {
        this.$refs.reportHistoryModal.open();
      })
    },
    async clickDownload () {
      this.quickDownloading = true;
      try {
        await this.export_excel_multiple_sheets(
          this.year,
          this.quarter,
          this.enterpriseId,
        )
      } finally {
        this.quickDownloading = false;
      }
    },
  },
  mounted() {
    this.clickSearch()
  }
}
</script>

<template>
  <div class="padding flex direction-column width-100 height-100">
    <div class="search-form">
      <el-form inline>
        <el-form-item>
          <el-radio-group v-model="type">
            <el-radio :label="1">季报</el-radio>
            <el-radio :label="2">年报</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年份" style="margin-left: 40px;">
          <el-date-picker type="year" :editable="false" :clearable="false" v-model="year" value="yyyy" value-format="yyyy" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item v-if="type === 1" label="季度">
          <el-select v-model="quarter">
            <el-option v-for="option in options" :key="option.value" v-bind="option"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="clickSearch">查询</el-button>
          <el-button v-if="quickReporting" type="primary" :loading="quickReporting">一键上报</el-button>
          <el-button v-else type="primary" icon="el-icon-upload" @click="clickReport">一键上报</el-button>
          <el-button v-if="quickDownloading" type="primary" :loading="quickDownloading">一键导出</el-button>
          <el-button v-else type="primary" icon="el-icon-download" @click="clickDownload">一键导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="flex-1 overflow-auto dark-table-wrapper">
      <el-table
        v-loading="loading"  :data="lists"
        height="100%"
        :header-cell-style="{
          color: 'white',
          backgroundColor: themeColor,
        }"
      >
        <div slot="empty" class="empty-lists">
          <i class="i-custom:search"></i>
          <span class="empty-text">暂无数据</span>
        </div>
        <el-table-column label="表名" prop="alias"></el-table-column>
        <el-table-column label="全名" prop="name"></el-table-column>
        <el-table-column label="状态" prop="statusText"></el-table-column>
        <el-table-column label="备注" prop="remark">
          <template #default="{row}">
            <span style="color: var(--danger-color)">{{ row.remark }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" :width="240">
          <template #default="{ row }">
            <el-button v-if="getVisible(row.status, 1)" type="primary" size="mini" @click="clickView(row)">填写</el-button>
            <el-button v-if="getVisible(row.status, 2)" type="primary" size="mini" @click="clickView(row)">修改</el-button>
            <el-button v-if="getVisible(row.status, 3)" type="primary" size="mini" @click="clickView(row, true)">查看</el-button>
            <el-button v-if="getVisible(row.status, 4)" type="primary" size="mini" @click="clickViewHistory(row)">历史操作</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 查看操作历史 -->
    <report-history-modal v-if="tableId" :year="year" :quarter="quarter" :table-id="tableId" ref="reportHistoryModal"></report-history-modal>

    <!-- 报表对话框 -->
    <div v-if="showTableAccount" class="padding table-account-details">
      <component
        :is="tableComponent"
        ref="quarterlyAccountTable"
        :year="year" :quarter="quarter"
        :columns="tableColumns" :name="tableName" :t-id="tableAccountId"
        :enterprise-id="enterpriseId" :enterprise-name="enterpriseName"
        :readonly="readonly" :show-line-number="false"
        :small_numeral_name="small_numeral_name"
        :first_of_five_year_plan="first_of_five_year_plan"
      >
        <template #title="{ title, seriesNo }">
          <div class="flex align-center position-relative">
            <el-button type="primary" icon="el-icon-back" circle @click="back(!showButton || readonly)"></el-button>
            <span v-if="autoSaveAble" class="last-save-timestamp">最近保存 {{ lastSaveTimestamp }}</span>
            <h2 :title="title" class="margin-horizontal-auto text-truncate"
              :style="'max-width: calc(100% - '+titleWidth+'px);font-weight: normal;'">
              {{title}}
              <small v-if="seriesNo">（{{seriesNo}}）</small>
            </h2>
            <template v-if="showButton && !readonly">
              <el-button v-if="showLoadPrevDataButton" type="success" @click="loadPrevData">加载上期数据</el-button>
              <el-button :loading="loading1" type="warning" @click="saveStage">暂存</el-button>
              <el-button :loading="loading2" type="danger" @click="saveFilled">保存</el-button>
            </template>
            <el-button type="primary" @click="export_excel_report_report">导出</el-button>
            <el-button v-if="showFixAppendEmptyRowBall" type="primary" @click="clickFixAppendEmptyRowBall">添加行</el-button>
          </div>
        </template>
      </component>
    </div>
  </div>
</template>

<style scoped>

</style>
